import React from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { withRouter } from "react-router-dom";
import logo from "../img/login.jpg";
import { adminRoutes } from "../routes";
import Icon from "@ant-design/icons/lib/components/Icon";
// 过滤路由，是否展示
const routes = adminRoutes.filter((route) => route.isShow);
const { Header, Content, Footer, Sider } = Layout;

function index(props) {
  return (
    <Layout>
      <Header className="header">
        <div className="logo">
          <img src={logo} alt="logo" style={{ width: "50px" }} />
        </div>
      </Header>
      <Content style={{ padding: "0 50px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          {/* <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item> */}
        </Breadcrumb>
        <Layout
          className="site-layout-background"
          style={{ padding: "24px 0" }}
        >
          <Sider className="site-layout-background" width={200}>
            <Menu
              mode="inline"
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%" }}
            >
              {routes.map((route) => {
                return (
                  <Menu.Item
                    key={route.path}
                    onClick={p=> props.history.push(p.key)}
                  >
                    <Icon type={route.icon} />
                    {route.title}
                  </Menu.Item>
                );
              })}
            </Menu>
          </Sider>
          <Content style={{ padding: "0 24px", minHeight: 280 }}>
            {props.children}
          </Content>
        </Layout>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  );
}

export default withRouter(index);
